<template>
  <div class="container">
    <div class="wrapper">
      <div class="section" v-for="(item, index) in list" :key="index">
        <div>{{ item.name }}</div>
      </div>
    </div>
    <!-- <div class="nac" style="height:500px"></div> -->
    <nav>
      <el-tabs
        @tab-click="handlerClick"
        v-model="activeName"
        :tab-position="tabPosition"
        style="height: 200px;"
      >
        <el-tab-pane
          v-for="(item, index) in list"
          :key="index"
          :name="'tab' + index"
          :label="item.name"
        ></el-tab-pane>
      </el-tabs>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "tab0",
      tabPosition: "right",
      list: [
        { id: 0, name: "用户管理" },
        { id: 1, name: "用户管理" },
        { id: 2, name: "用户管理" },
        { id: 3, name: "用户管理" },
      ],
    };
  },
  methods: {
    handlerClick(tab, event) {
      console.log(tab, event);
      this.jump(tab.index);
    },
    dataScroll() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
    },
    jump(index) {
      let jump = document.querySelector(".section");
      let total = jump[index].offsetTop;
      //clientHeight
      document.body.scrollTop = total;
      document.documentElement.scrollTop = total;
      window.pageYOffset = total;
    },
    loadScroll() {
      var self = this;
      var sections = document.querySelector(".section");
      console.log(self);
      for (var i = sections.length - 1; i >= 0; i--) {
        if (self.scroll >= sections[i].offsetTop - 100) {
          self.activeName = "tab" + i;
          break;
        }
      }
    },
  },
  watch: {
    scroll() {
      this.loadScroll();
    },
  },
  mounted() {
    window.addEventListener("scroll", this.dataScroll);
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .wrapper {
    width: 100%;
    height: 1180px;
    border: 1px solid #000000;
    .section {
      width: 100%;
      height: 500px;
    }
  }
}
</style>
